﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="opAdd">新增</el-button>
                <sc-export
                    :queryType="`out-stock/export`"
                    :queryList="queryList"
                    :fileName="'出库订单'"
                    :isTest="true"
                    showText="导出"
                />
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="出库时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.outStockDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="业务时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.applyDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="出库仓库" label-width="100px">
                        <sc-warehouse-select
                            ref="orgselect"
                            :props="warehouseProps"
                            :selectKeyValue="'warehouseId'"
                            v-model="queryList.warehouses"
                            @fatherMethod="warehouseSelectProcess"
                        ></sc-warehouse-select>
                    </el-form-item>
                    <el-form-item label="出库类型" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.outStockType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsoutStockType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.auditDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="出库金额" label-width="100px">
                        <el-input
                            placeholder="---请输入最小出库金额---"
                            v-model="queryList.minAmt"
                            style="width: 145px"
                        />
                        <span style="width: 10px;">-</span>
                        <el-input
                            placeholder="---请输入最大出库金额---"
                            v-model="queryList.maxAmt"
                            style="width: 145px"
                        />
                    </el-form-item>
                    <el-form-item label="出库单号" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.outStockCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="备注" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.remarks"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="出库状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.status"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.auditStatus"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsAuditState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建人" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.crName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="创建时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.crDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="创建类型" label-width="100px">
                        <el-select
                            placeholder="---请选择创建类型---"
                            v-model="queryList.createType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsCreateType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="来源类型" label-width="100px">
                        <el-select
                            placeholder="---请选择来源类型---"
                            v-model="queryList.sourceType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsSourceType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联单号" label-width="100px" v-if="orgType==1">
                        <el-input
                            placeholder="---请输入关联单号---"
                            v-model="queryList.fkOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="采购单号" label-width="100px" v-if="orgType==3">
                        <el-input
                            placeholder="---请输入采购单号---"
                            v-model="queryList.purchaseOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <el-container>
                <el-header style="width: 100%;height:100px" v-if="orgType==2">
                    <el-tabs
                        v-model="this.queryList.warehouses"
                        @tab-click="onTabClick"
                        style="width: 100%;"
                    >
                        <!-- <el-tab-pane label="全部" name=""></el-tab-pane> -->
                        <el-tab-pane
                            :label="item.warehouseName"
                            :name="item.warehouseId"
                            v-for="item in warehouses"
                            :key="item"
                        >
                            <el-tag key="" :effect="this.queryList.outStockType===''?'dark':'plain'" @click="onTagClick('')">全部</el-tag>
                            <el-tag
                                :effect="this.queryList.outStockType===subItem.value?'dark':'plain'"
                                @click.stop="onTagClick(subItem.value)"
                                type="primary"
                                v-for="subItem in getOutStockType(item.warehouseType)"
                                :key="subItem"
                                style="margin-right: 10px;cursor:pointer"
                            >{{ subItem.label }}</el-tag>
                        </el-tab-pane>
                    </el-tabs>
                </el-header>
                <el-main class="nopadding">
                    <scTable
                        ref="mytable"
                        :queryType="'out-stock/pages'"
                        :data="listData"
                        :queryList="queryList"
                        :column="columnList"
                        :orderList="OrderList"
                        :sort-orders="['ascending', 'descending']"
                        @selection-change="selectionChange"
                        row-key="outStockId"
                        key="outStockId"
                        stripe
                        show-summary
                        remoteSummary
                    >
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="applyDate" label="业务时间" width="160" sortable>
							<template #default="scope">{{ scope.row.applyDate?.slice(0, 10) }}</template>
						</el-table-column>
                        <el-table-column prop="outStockDate" label="出库时间" width="160" sortable>
                            <template #default="scope">{{ scope.row.outStockDate?.slice(0, 10) }}</template>
                        </el-table-column>
                        <el-table-column prop="outStockCode" label="出库编号" width="220" sortable>
                            <template #default="scope">
                                <span
                                    class="el-span-text"
                                    @click="opShow(scope.row, scope.$index)"
                                >{{scope.row.outStockCode}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="warehouseName" label="出库仓库" width="150" sortable></el-table-column>
                        <el-table-column prop="outStockTypeDesc" label="出库类型" width="150" sortable></el-table-column>
                        <el-table-column prop="statusDesc" label="出库状态" width="140" sortable></el-table-column>
                        <el-table-column prop="createType" label="创建类型" width="140" sortable>
                            <template #default="scope">{{ scope.row.createTypeDesc }}</template>
                        </el-table-column>
                        <el-table-column prop="totalAmount" label="单据金额" width="150" sortable>
                            <template #default="scope">{{ scope.row.totalAmount?.toFixed(2) }}</template>
                        </el-table-column>
                        <!-- <el-table-column
                    prop="applyOrderCode"
                    label="要货单号"
                    width="150"
                    sortable
                    v-if="orgType==1"
                >
                    <template #default="scope">
                        <div
                            v-if="scope.row.applyOrderCode"
                            class="goto"
                            @click="goApplyTo(scope.row)"
                        >{{ scope.row.applyOrderCode }}</div>
                        <div v-else>无</div>
                    </template>
                        </el-table-column>-->
                        <el-table-column prop="applyOrderCode" label="关联单号" width="150" sortable>
                            <template #default="scope">
                                <div
                                    v-if="scope.row.applyOrderCode&&!scope.row.giveOrderId"
                                    class="goto"
                                    @click="goTo(scope.row)"
                                >{{ scope.row.applyOrderCode}}</div>
                                <div
                                    v-else-if="scope.row.afterOrderId"
                                    class="goto"
                                    @click="goTo(scope.row)"
                                >{{ scope.row.afterOrderCode }}</div>
                                <div
                                    v-else-if="scope.row.giveOrderId"
                                    class="goto"
                                    @click="goTo(scope.row)"
                                >{{ scope.row.giveOrderCode }}</div>
                                <div
                                    v-else-if="scope.row.recoveryCode"
                                    class="goto"
                                    @click="goTo(scope.row)"
                                >{{ scope.row.recoveryCode }}</div>
                                <div
                                    v-else-if="scope.row.allocateOrderCode"
                                    class="goto"
                                    @click="goTo(scope.row)"
                                >{{ scope.row.allocateOrderCode }}</div>
                                <div v-else>无</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="purchaseOrderCode"
                            label="采购单号"
                            width="150"
                            sortable
                            v-if="orgType==3"
                        >
                            <template #default="scope">
                                <div
                                    v-if="scope.row.purchaseOrderCode"
                                    class="goto"
                                    @click="goPurchaseTo(scope.row)"
                                >{{ scope.row.purchaseOrderCode }}</div>
                                <div v-else>无</div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="materialDesc" label="要货物料" width="240" sortable show-overflow-tooltip></el-table-column> -->
                        <el-table-column prop="remarks" label="备注" width="220" sortable></el-table-column>
                        <el-table-column prop="crName" label="创建人" width="140" sortable></el-table-column>
                        <el-table-column prop="crDate" label="创建时间" width="150" sortable>
                            <template #default="scope">{{ scope.row.crDate?.slice(0, 10) }}</template>
                        </el-table-column>
                        <el-table-column prop="auditRemarks" label="审核备注" width="220" sortable></el-table-column>
                        <el-table-column prop="auditName" label="审核人" width="140" sortable></el-table-column>
                        <el-table-column prop="auditDate" label="审核时间" width="150" sortable>
                            <template
                                #default="scope"
                            >{{ (scope.row.auditDate?.length > 10 ? scope.row.auditDate?.slice(0, 10) : "") }}</template>
                        </el-table-column>
                        <el-table-column prop="auditStatusDesc" label="审核状态" width="140" sortable></el-table-column>

                        <el-table-column
                            prop="sourceOutStockCode"
                            label="源出库单号"
                            width="140"
                            sortable
                        >
                            <template #default="scope">
                                <span
                                    class="el-span-text"
                                    @click="opSourceShow(scope.row, scope.$index)"
                                >{{scope.row.sourceOutStockCode}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" align="right" min-width="240">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        @click="opShow(scope.row, scope.$index)"
                                    >查看</el-button>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        v-if="scope.row.auditStatus ==0 ||scope.row.auditStatus ==2||scope.row.auditStatus ==9"
                                        @click="opEdit(scope.row, scope.$index)"
                                    >编辑</el-button>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        @click="opCopy(scope.row, scope.$index)"
                                    >复制</el-button>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        v-if="scope.row.auditStatus == 2"
                                        @click="audit(scope.row, scope.$index)"
                                    >审核</el-button>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        v-if="scope.row.auditStatus == 3"
                                        @click="antiAudit(scope.row, scope.$index)"
                                    >反审核</el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>

    <detail-dialog
        v-if="dialogDetail"
        ref="detailDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>
</template>

<script>
import detailDialog from "./detail";
import saveDialog from "./save";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "outStock",
    components: {
        detailDialog,
        saveDialog,
        publicjs,
    },
    data() {
        return {
            dialogDetail: false,
            dialogSave: false,
            receiveSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["outStockId"],
            columnList: [],
            OrderList: { outStockId: "Asc" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            warehouseProps: {
                label: "warehouseName",
                value: "warehouseId",
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsState: [],
            optionsAuditState: [],
            optionsoutStockType: [],
            materialTypeTree: [],
            optionsCreateType: [],
            optionsSourceType: [],
            warehouses: [],
            saleOutStockTypes: [8],
            barOutStockTypes: [0, 90,91,92,98,99],
            orgType: 0,
            defaultTime: [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(0);
                this.$refs.saveDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.outStockId);
                this.$refs.saveDialog.open("Edit");
            });
        },
        //复制
        opCopy(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row.outStockId);
                this.$refs.saveDialog.open("Add");
            });
        },
        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row.outStockId);
                this.$refs.detailDialog.open("detail");
            });
        },
        //查看
        opSourceShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row.sourceOutStockId);
                this.$refs.detailDialog.open("detail");
            });
        },
        //审核
        audit(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row.outStockId);
                this.$refs.detailDialog.open("audit");
            });
        },
        //反审核
        async antiAudit(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "out-stock/anti-audit",
                    {
                        outStockIds: [row.outStockId],
                    }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        goTo(row) {
            if (row.recoveryCode) {
                this.$router.push({
                    path: "/revoceryIndex",
                    query: { recoveryCode: row.recoveryCode },
                });
            } else if (row.afterOrderId && row.afterOrderId > 0) {
                this.$router.push({
                    path: "/afterOrder",
                    query: { afterOrderCode: row.afterOrderCode },
                });
            } else if (row.giveOrderId && row.giveOrderId > 0) {
                this.dialogGiveDetail = true;
                this.$nextTick(() => {
                    this.$refs.giveDetailDialog.setData({
                        giveOrderId: row.giveOrderId,
                    });
                    this.$refs.giveDetailDialog.open("Show");
                });
            } else if (row.allocateOrderCode && row.allocateOrderId > 0) {
                this.$router.push({
                    path: "/allocateorder",
                    query: { allocateOrderCode: row.allocateOrderCode },
                });
            } else {
                this.$router.push({
                    path: "/apply/order",
                    query: { applyOrderCode: row.applyOrderCode },
                });
            }
        },
        goApplyTo(row) {
            // 跳转地址按要求更换
            this.$router.push({
                path: "/apply/order",
                query: { applyOrderCode: row.applyOrderCode },
            });
        },
        goPurchaseTo(row) {
            // 跳转地址按要求更换
            this.$router.push({
                path: "/purchase/order/order",
                query: { purchaseOrderCode: row.purchaseOrderCode },
            });
        },
        //设置状态
        async setStatus(row, status) {
            let url = "out-stock/submitted";
            switch (status) {
                case 1:
                    url = "out-stock/returned";
                case 2:
                    url = "out-stock/withdrawn";
                    break;
                case 4:
                    url = "out-stock/submitted";
                    break;
            }
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    url,
                    { outStockIds: [row.outStockId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    {
                        Codes: [
                            "OutStockStatus",
                            "OutStockType",
                            "OutStockAuditStatus",
                            "CreateType",
                            "SourceType",
                        ],
                    }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "OutStockStatus"
                    )?.optionsDetails;
                    this.optionsAuditState = returnValue.response.find(
                        (p) => p.code == "OutStockAuditStatus"
                    )?.optionsDetails;
                    this.optionsoutStockType = returnValue.response.find(
                        (p) => p.code == "OutStockType"
                    )?.optionsDetails;
                    this.optionsCreateType = returnValue.response.find(
                        (p) => p.code == "CreateType"
                    ).optionsDetails;
                    this.optionsSourceType = returnValue.response.find(
                        (p) => p.code == "SourceType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //仓库
        async warehouseSelectProcess(rowData) {
            this.queryList.warehouses = [];
            this.queryList.warehouseIds = [];
            if (rowData && rowData.length > 0) {
                rowData.map((p, index) => {
                    if (p) {
                        debugger;
                        this.queryList.warehouses = [
                            ...this.queryList.warehouses,
                            {
                                warehouseId: p.warehouseId,
                                warehouseName: p.warehouseName,
                            },
                        ];
                        this.queryList.warehouseIds = [
                            ...this.queryList.warehouseIds,
                            p.warehouseId,
                        ];
                    }
                });
            }
            await this.opBindData();
        },
        async getWarehouse() {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "warehouse/org-list",
                    {}
                );
                if (returnValue.status == 200) {
                    this.warehouses = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        getOutStockType(warehouseType) {
            if (warehouseType == 0) {
                return this.optionsoutStockType.filter((t) =>
                    this.saleOutStockTypes.includes(t.value)
                );
            } else if (warehouseType == 3) {
                const barOptionsoutStockType= this.optionsoutStockType.filter((t) =>
                    this.barOutStockTypes.includes(t.value)
                );
                console.log('barOptionsoutStockType',barOptionsoutStockType)
                return barOptionsoutStockType;
            }
        },
        async onTabClick(tab, event) {
            var convert = JSON.parse(JSON.stringify(tab.props));
            console.log(convert);
            this.queryList.warehouses = convert.name;
            this.queryList.warehouseId = convert.name;
            this.$refs.mytable.getData();
        },

        async onTagClick(val) {
            console.log("选择", val);
            this.queryList.outStockType = val;
            this.$refs.mytable.getData();
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
        var outStockCode = this.$route.query.outStockCode;
        if (outStockCode) {
            this.queryList.outStockCode = outStockCode;
        }

        var fkOrderCode = this.$route.query.fkOrderCode;
        if (fkOrderCode) {
            this.queryList.fkOrderCode = fkOrderCode;
        }
        await this.opBindData();
        await this.getWarehouse();
    },
};
</script>

<style>
.goto {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>
